<template>
  <div class="home">
   <h1>小学通</h1>

   <div v-show="loading">
     <van-skeleton title :row="3" />
   </div>
   <div v-show="!loading">
     <ul>
       <li v-for="item in list" :key="item.id">
         <span>{{item.title}}</span>


          <a :href="'/detail/'+item.id">
          <!--图片懒加载-->
          <img v-lazy="item.img"/>
          </a>

          <button @click="goTo(item)">进入</button>
       </li>
     </ul>
   </div>
  </div>
</template>

<script>
import axios from 'axios';
import { Skeleton } from 'vant';
import Vue from 'vue';
Vue.use(Skeleton);

export default {
  name: 'Home',
  components: {
   
  },
  data(){
return {
  loading:false,  //加载状态
  list:[]
}
  },
  methods:{
   goTo(item){
     this.$router.push('/detail/'+item.id)
   }
  },
  created(){
      this.loading=true;
      axios.get('/api/list').then((res)=>{
        console.log('list res',res);
        this.list=res.data.data.list;
       
      }).finally(()=>{
           this.loading=false;
      })
  }
}
</script>
